<template>
	<div class="detail-logistics" v-if="logistics">
		<p>
			<span>{{logistics.list[0].time}}</span>
			<span>{{logistics.list[0].text}}</span>
		</p>
		<a @click="onLogisticsOrder(order)" href="javascript:;">查看物流</a>
	</div>

	<Teleport to="#dailog">
		<OrderLogistics ref="logisticsOrderCom" />
	</Teleport>
</template>

<script>
	import {
		ref
	} from 'vue'
	import {
		logisticsOrder
	} from '@/api/order'
	import {
		useLogisticsOrder
	} from '../index'
	import OrderLogistics from './order-logistics'

	export default {
		components: {
			OrderLogistics
		},

		props: {
			order: {
				type: Object,
				default: () => ({})
			}
		},

		async setup(props) {
			const logistics = ref(null)
			const data = await logisticsOrder(props.order.id)
			logistics.value = data.result
			return {
				logistics,
				...useLogisticsOrder()
			}
		}
	}
</script>

<style scoped lang="less">
	.detail-logistics {
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 30px;
		background-color: #f5f5f5;
		margin: 30px 50px 0;

		>p {
			flex: 1;

			span {
				color: #999;

				&:first-child {
					margin-right: 30px;
				}
			}
		}

		>a {
			color: @xtxColor;
			text-align: center;
		}
	}
</style>
